<template>
  <div>
    <div class="home_nav">
      <van-search @focus="onFocus" v-model="value" shape="round" background="#efefef" placeholder="请输入搜索关键词" />
      <van-tabs  @change="onChange">
        <van-tab v-for="(item,index) in navs" :key="index" :title="item.title"></van-tab>
      </van-tabs>
      <ul class="home_sort">
        <li>综合</li>
        <li>销量</li>
        <li>新品</li>
        <li @click="onSort(sorts)">价格<span class="iconfont icon-paixu"></span></li>
      </ul>
    </div>

    <div class="home_container">
      <div class="home_card" v-for="(item,index) in showlist" :key="index">
        <img width="100%" :src="item.pic" alt />
        <div class="card_cons">
          <p class="van-ellipsis">{{item.title}}</p>
          <p class="card_price">
            <span>
              ￥
              <span class="price">{{item.price}}</span>
            </span>
            <span class="iconfont icon-gouwuche"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      sorts:true
    };
  },
  mounted() {
    this.$store.dispatch("getNav");
    this.$store.dispatch("getData");
  },
  computed: {
    navs: function() {
      return this.$store.state.navs;
    },
    goods: function() {
      return this.$store.state.goods;
    },
    showlist:function () {
      return this.$store.state.showlist;
    }
  },
  methods: {
    onChange(index,name) {
      this.$store.dispatch('onChange',name)
    },
    onFocus() {
      this.$router.push('/search');
    },
    onSort(sorts) {
      this.sorts = !this.sorts;
      if (sorts) {
        this.showlist.sort((a,b) => {
          return a.price - b.price;
        })
      }else {
         this.showlist.sort((a,b) => {
          return b.price - a.price;
        })
      }
    }
  }
};
</script>

<style scoped>
.home_nav {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #fff;
}
.home_nav h4 {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 15px;
}
.home_container {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 140px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0px 5px;
}
.home_card {
  width: 48%;
  border: 1px solid lightgrey;
  margin: 5px 0px;
}
.card_cons {
  box-sizing: border-box;
  padding: 0px 8px;
  line-height: 30px;
}
.card_price {
  color: red;
  font-size: 12px;
  font-weight: 550;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 18px;
}
.icon-gouwuche {
  color: grey;
  font-size: 20px;
}
.home_sort {
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: start;
  align-items: center;
}
.home_sort li {
  padding: 6px 13px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>